{% extends 'fengge/base.html' %}

{% block html_title %}
	数值模拟平台
{% endblock %}

{% block html_head_script %}
	{% load staticfiles %}
	<link rel="stylesheet" type="text/css" href="{% static 'fengge/ui/themes/default/dxwindui.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'fengge/ui/themes/icon.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'fengge/ui/css/demo.css' %}">
	<link href="{% static 'fengge/ui/favicon.ico' %}" rel="shortcut icon">
{#	<script type="text/javascript" src="{% static 'fengge/ui/js/jquery-1.7.2.min.js' %}"></script>#}
{#	<script type="text/javascript" src="{% static 'fengge/ui/js/jquery.easyui.min.js' %}"></script>#}
	<script type="text/javascript" src="{% static 'js/easyui/jquery.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/easyui/jquery.easyui.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'fengge/ui/js/function_menu.js' %}" ></script>
	<link type="text/css"  rel="stylesheet" href="{% static 'fengge/ui/css/function_menu.css' %}" />

	<!--滚动条效果-->
	<link href="{% static 'fengge/ui/css/drag.css' %}" type="text/css"  rel="stylesheet"/>
	<script src="{% static 'fengge/ui/js/drag.js' %}" type="text/javascript"></script>
	<script type="text/javascript">
		// after page is loaded, initialize DIV elements inside tables
		window.onload = function () {
			// initialization
			REDIPS.drag.init();
			// set hover color
			REDIPS.drag.hover_color = '#E7C7B2';
			// set drop option to 'switching'
			REDIPS.drag.drop_option = 'switching';

		}
	</script>

{#	<link rel="stylesheet" type="text/css" href="{% static 'js/easyui/themes/default/easyui.css' %}">#}
{#	<link rel="stylesheet" type="text/css" href="{% static 'js/easyui/themes/icon.css' %}">#}
{##}
	<link rel="stylesheet" href="{%  static 'js/leaflet/leaflet_fg.css' %}" />
	<link rel="stylesheet" href="{%  static 'js/leaflet/leaflet.draw.css' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'fengge/frontend/fg_default.css' %}" />
{% endblock %}

{% block html_head %}
{% endblock %}

{% block html_body %}
{#	<div class="easyui-layout" style="background:rgba(0,40,60,1); line-height:30px;">#}

		<!--left部分Start-->
		<div data-options="region:'west',split:true" class="west" style="width:260px;padding:0px; overflow:visible; position:relative">
			<div class="nav_left"></div>
			<div class="function_menu">
				<a class="yellow" href="javascript:void(0)">功能一</a>
				<a class="green" href="javascript:void(0)">功能二</a>
				<a class="pink" href="javascript:void(0)">功能三</a>
				<a class="purple" href="javascript:void(0)">功能四</a>
				<div style="clear:both;"></div>
			</div>
			<ul class="itempnl">
				<li><span>C</span></li>
				<li class="p_name projectName"><span>ProjectName</span></li>
				<li><span>A</span></li>
				<li><span>B</span></li>
				<div style="clear:both;"></div>
			</ul>
			<!--
      <ul class="pnl">
          <li class="p_tit"><span>滤：</span></li>
          <li><span>点</span></li>
          <li><span>区</span></li>
          <li><span>...</span></li>
          <div style="clear:both;"></div>
      </ul>
      -->
			<!--拖拽框效果Start-->
			<div id="drag" class="drag_box">
				<div id="bd0" class="top">
					<table id="tablcon" class="tablcon">
						<tr id="tr">
							<td>
								<div class="drag">
									<span class="con_close"></span>
									<div class="con_pic p1">
										<img src="{% static 'fengge/ui/themes/default/images/con_pic1.jpg' %}" />
										<span>Caption</span>
									</div>
									<div class="con_tit">XXX点</div>
									<div class="con_info">具体的描述，以省略号限制长度具体的描述，以省略号限制长度具体的描述，以省略号限制长度...</div>
									<div class="clear"></div>
								</div>

							</td>
						</tr>
						<tr>
							<td>
								<div class="drag">
									<span class="con_close"></span>
									<div class="con_pic p2">
										<img src="{% static 'fengge/ui/themes/default/images/con_pic2.jpg' %}" /><span>Caption</span>
									</div>
									<div class="con_tit">XXX点</div>
									<div class="con_info">具体的描述，以省略号限制长度具体的描述，以省略号限制长度具体的描述，以省略号限制长度...</div>
									<div class="clear"></div>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="drag">
									<span class="con_close"></span>
									<div class="con_pic p3"><img src="{% static 'fengge/ui/themes/default/images/con_pic3.jpg' %}" /><span>Caption</span></div>
									<div class="con_tit">XXX点</div>
									<div class="con_info">具体的描述，以省略号限制长度具体的描述，以省略号限制长度具体的描述，以省略号限制长度...</div>
									<div class="clear"></div>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="drag">
									<span class="con_close"></span>
									<div class="con_pic p4"><img src="{% static 'fengge/ui/themes/default/images/con_pic4.jpg' %}" /><span>Caption</span></div>
									<div class="con_tit">XXX点</div>
									<div class="con_info">具体的描述，以省略号限制长度具体的描述，以省略号限制长度具体的描述，以省略号限制长度...</div>
									<div class="clear"></div>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="drag">
									<span class="con_close"></span>
									<div class="con_pic p5"><img src="{% static 'fengge/ui/themes/default/images/con_pic5.jpg' %}" /><span>Caption</span></div>
									<div class="con_tit">XXX点</div>
									<div class="con_info">具体的描述，以省略号限制长度具体的描述，以省略号限制长度具体的描述，以省略号限制长度...</div>
									<div class="clear"></div>
								</div>
							</td>
						</tr>
					</table>
				</div>

				<div class="animate_pic pic1">
					<ul>
						<li class="pic_con"><span class="pic_close"></span><img src="{% static 'fengge/ui/themes/default/images/con_pictest.jpg' %}" /></li>
						<li class="pic_con"><span class="pic_close"></span><img src="{% static 'fengge/ui/themes/default/images/con_pictest.jpg' %}" /></li>
						<li class="pic_con"><span class="pic_close"></span><img src="{% static 'fengge/ui/themes/default/images/con_pictest.jpg' %}" /></li>
						<div class="clear"></div>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="animate_pic pic2">
					<ul>
						<li class="pic_con"><span class="pic_close"></span><img src="{% static 'fengge/ui/themes/default/images/con_pictest.jpg' %}" /></li>
						<li class="pic_con"><span class="pic_close"></span><img src="{% static 'fengge/ui/themes/default/images/con_pictest.jpg' %}" /></li>
						<li class="pic_con"><span class="pic_close"></span><img src="{% static 'fengge/ui/themes/default/images/con_pictest.jpg' %}" /></li>
						<div class="clear"></div>
					</ul>
					<div class="clear"></div>
				</div>
				<div id="scroll0" class="scroll">
					<p id="p0"></p>
				</div>
			</div>
			<!--拖拽框效果End-->

			<!--效果浮动层Start-->
			<div class="fudongdiv" style="background:rgb(0, 40, 60); position:absolute; top:306px; z-index:99; display:none">
				<ul class="pnl">
					<li><span>图</span></li>
					<li class="p_name"><span>当前工程</span></li>
					<li><span>存</span></li>
					<li><span>另</span></li>
					<div style="clear:both;"></div>
				</ul>
				<ul class="pnl">
					<li class="p_info"><span>描述</span></li>
					<li><span>新</span></li>
					<li><span>删</span></li>
					<div style="clear:both;"></div>
				</ul>
				<div class="time_info">创建：2014-05-22 12:23:12 &nbsp;&nbsp;访问：2014-05-22 12:23:12</div>
				<ul class="pnl btmline">
					<li class="p_tit"><span>我的工程</span></li>
					<li><span>功</span></li>
					<li><span>能</span></li>
					<li><span>钮</span></li>
					<div style="clear:both;"></div>
				</ul>
				<div id="drag1">
					<div id="bd1" class="top1">
						<div id="objcon" class="objcon">
							<div class="obj">
								<span class="con_close"></span>
								<div class="obj_pic"><img src="{% static 'fengge/ui/themes/default/images/obj.png' %}" /></div>
								<div class="obj_info">工程1</div>
								<div class="obj_other">预留</div>
								<div class="objtime_info">创建：2014-05-22 12:23:12 &nbsp;&nbsp;访问：2014-05-22 12:23:12</div>
								<div style="clear:both;"></div>
							</div>
							<div class="obj">
								<span class="con_close"></span>
								<div class="obj_pic"><img src="{% static 'fengge/ui/themes/default/images/obj.png' %}" /></div>
								<div class="obj_info">工程1</div>
								<div class="obj_other">预留</div>
								<div class="objtime_info">创建：2014-05-22 12:23:12 &nbsp;&nbsp;访问：2014-05-22 12:23:12</div>
								<div style="clear:both;"></div>
							</div>
							<div class="obj">
								<span class="con_close"></span>
								<div class="obj_pic"><img src="{% static 'fengge/ui/themes/default/images/obj.png' %}" /></div>
								<div class="obj_info">工程1</div>
								<div class="obj_other">预留</div>
								<div class="objtime_info">创建：2014-05-22 12:23:12 &nbsp;&nbsp;访问：2014-05-22 12:23:12</div>
								<div style="clear:both;"></div>
							</div>
							<div class="obj last">
								<span class="con_close"></span>
								<div class="obj_pic"><img src="{% static 'fengge/ui/themes/default/images/obj.png' %}" /></div>
								<div class="obj_info">工程1</div>
								<div class="obj_other">预留</div>
								<div class="objtime_info">创建：2014-05-22 12:23:12 &nbsp;&nbsp;访问：2014-05-22 12:23:12</div>
								<div style="clear:both;"></div>
							</div>
						</div>
					</div>
					<div id="scroll1" class="scroll1">
						<p id="p1"></p>
					</div>
				</div>
			</div>
			<!--效果浮动层End-->

		</div>
		<!--left部分End-->

		<!--center部分Start-->
		<div data-options="region:'center'" class="center">
			<div class="easyui-layout", fit=true style="border:0">
				<div data-options="region:'north',split:false" style="height:62px;border:0;border-bottom:1px #62dcfb;">
					<div class="" style="height:60px;">
						<ul class="nav_right_option">
							<li>
								<div class="pic"><img src="{% static 'fengge/ui/themes/default/images/con_pic3.jpg' %}" /></div>
								<div class="tit">XXX点</div>
							</li>
							<li>
								<div class="pic"><img src="{% static 'fengge/ui/themes/default/images/con_pic3.jpg' %}" /></div>
								<div class="tit">XXX点</div>
							</li>
							<li>
								<div class="pic"><img src="{% static 'fengge/ui/themes/default/images/con_pic3.jpg' %}" /></div>
								<div class="tit">XXX点</div>
							</li>
							<div style="clear:both;"></div>
						</ul>
						<ul class="nav_toppanel">
							<li>
								经纬度：<input class="" type="text" value="" />
							</li>
							<li>
								经纬度：<input class="" type="text" value="" />
							</li>

							<div style="clear:both;"></div>
						</ul>
						<ul class="nav_right">
							<li>
								<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-style'"></a>
							</li>
							<li>
								<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-man'"></a>
							</li>
							<li>
								<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-shopping'"></a>
							</li>
							<li>
								<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-mail'"></a>
							</li>
							<li>
								<input class="easyui-searchbox" data-options="prompt:'search...'" style="width:200px;">
							</li>
							<div style="clear:both;"></div>
						</ul>
						<div id="mm1" style="width:100px;">
							<div class="menu-sep"></div>
							<div data-options="iconCls:'icon-style_lis'">魅力蓝色</div>
							<div data-options="iconCls:'icon-style_lis'">温暖橙色</div>
							<div data-options="iconCls:'icon-style_lis'">贵族紫色</div>
							<div class="menu-sep"></div>
						</div>
						<div id="mm2" style="width:100px;">
							<div class="menu-sep"></div>
							<div data-options="iconCls:'icon-login'">登陆</div>
							<div data-options="iconCls:'icon-logout'">注销</div>
							<div data-options="iconCls:'icon-lock'">锁定</div>
							<div data-options="iconCls:'icon-set'">查看详情</div>
							<div class="menu-sep"></div>
						</div>
					</div>
				</div>
				<div data-options="region:'center',split:false", style="border:0" >
					<div id="mapContent", style="overflow-style:auto; opacity:1; margin:0px auto;height:100%;border:0"></div>
				</div>
			</div>
{#			<div style="overflow-style:auto; opacity:1; margin:0px auto;" id="mapContent"></div>#}

			<!--弹出层Start-->
			<div class="tool">
				<div class="tool_left">
					<ul class="opt1">
						<li class="p_tit"><span>Figure Title</span></li>
						<li><span>27km</span></li>
						<li><span>9km</span></li>
						<li><span>3km</span></li>
						<div style="clear:both;"></div>
					</ul>
					<ul class="opt2">
						<li><span>100km</span></li>
						<li><span>80km</span></li>
						<li><span>70km</span></li>
						<li><span>10km</span></li>
						<div style="clear:both;"></div>
					</ul>
				</div>
				<div class="tool_right">
					<div class="rightfirst">
						<div class="oneleftop"><input type="text" disabled/></div>
						<div class="oneleftbottom"><input type="text" /></div>
						<div class="oneright"><img src="{% static 'fengge/ui/themes/default/images/camera.png' %}" /></div>
					</div>
					<div class="righsecond">
						<ul class="">
							<li><span>下</span></li>
							<li><span>详</span></li>
							<li><span>...</span></li>
							<li class="divsion"><span>小</span></li>
							<li class="last"><span>删</span></li>
							<div style="clear:both;"></div>
						</ul>
					</div>
					<div class="righthird">
						<select class="" name="state" style="width:100%;">
							<option value="AL">Alabama</option>
							<option value="AK">Alaska</option>
							<option value="AZ">Arizona</option>
							<option value="AR">Arkansas</option>
							<option value="CA">California</option>
							<option value="CO">Colorado</option>
						</select>
					</div>
					<div class="righfourth">
						<div class="easyui-accordion" style="width:100%;height:254px;">
							<div title="统计" style="overflow:auto;color:#555;">
								<p>width: 100%</p>
							</div>
							<div title="日变化" class="datechange">
								<ul>
									<li>风速</li>
									<li>功率密度</li>
									<li>气压</li>
									<li>气温</li>
									<li>相对湿度</li>
									<li>空气密度</li>
									<div style="clear:both;"></div>
								</ul>
							</div>
							<div title="月变化">
							</div>
							<div title="时间序列">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--弹出层End-->
		</div>
		<!--center部分End-->
{#	</div>#}
{% endblock %}

{% block html_body_script %}
	{% load staticfiles %}
	<!--地图JS-->
{#	<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>#}
{#	<script type="text/javascript" src="{% static 'fengge/ui/js/map.js' %}"></script>#}

	<!--滚动条-->
	<script type="text/javascript" src="{% static 'fengge/ui/js/scroll.js' %}"></script>
	<script type="text/javascript">
		//close的显示隐藏
		$(".drag").mouseover(function(){
			$(this).children("span").css("display","block");
		});
		$(".drag").mouseout(function(){
			$(this).children("span").css("display","none");
		});

		$(".pic_con").mouseover(function(){
			$(this).children("span").css("display","block");
		});
		$(".pic_con").mouseout(function(){
			$(this).children("span").css("display","none");
		});

		$(".obj").mouseover(function(){
			$(this).children("span").css("display","block");
		});
		$(".obj").mouseout(function(){
			$(this).children("span").css("display","none");
		});


		//快照展开效果
		$(".p1").mouseover(function(){
			//alert($("#drag").children(".pic1").attr("class"));
			$("#drag").children(".pic1").show();
		});
		$(".p1").mouseout(function(){
			$(".animate_pic").mouseover(function(){
				$("#drag").children(".pic1").show();
				$("#drag").children(".pic2").hide();
			});
			$(".animate_pic").hide();

			$(".animate_pic").mouseout(function(){
				$(".animate_pic").hide();
			});
		});

		$(".p2").mouseover(function(){
			//alert($("#drag").children(".pic1").attr("class"));
			$("#drag").children(".pic2").show();
		});
		$(".p2").mouseout(function(){
			$(".animate_pic").mouseover(function(){
				$("#drag").children(".pic1").hide();
				$("#drag").children(".pic2").show();
			});
			$(".animate_pic").hide();

			$(".animate_pic").mouseout(function(){
				$(".animate_pic").hide();
			});
		});

		//展开我的工程
		$(".projectName").toggle(function(){
			$(".fudongdiv").css("display","block");
		},function(){
			$(".fudongdiv").css("display","none");
		});
	</script>



{#	<script src="{% static 'js/easyui/jquery.min.js' %}"></script>#}
	<script src="{% static 'js/underscore.js' %}"></script>
	<script src="{% static 'js/backbone.js' %}"></script>
	<script src="{% static 'js/backbone-tastypie.js' %}"></script>
	<script src="{% static 'js/easyui/jquery.easyui.min.js' %}"></script>
	<script src="{% static 'js/layer/layer.min.js' %}"></script>
	<script src="{% static 'js/leaflet/leaflet-src.js' %}"></script>
	<script src="{% static 'js/leaflet/leaflet-providers.js' %}"></script>
	<script src="{% static 'js/leaflet/leaflet.ChineseTmsProviders.js' %}"></script>
	<script src="{% static 'js/leaflet/leaflet-omnivore.js' %}"></script>
	<script src="{% static 'js/leaflet/leaflet.draw-src.js' %}"></script>
	<script src="{% static 'js/leaflet/leaflet-fg-addons.js' %}"></script>

	<script src="{% static 'fengge/frontend/constants.js' %}"></script>
	<script src="{% static 'fengge/frontend/common.js' %}"></script>
	<script src="{% static 'fengge/frontend/util.js' %}"></script>
{#	    <script src="{% static 'fengge/frontend/yangdw/map_icon.js' %}"></script>#}
	<script src="{% static 'fengge/frontend/dispatcher.js' %}"></script>
	<script src="{% static 'fengge/frontend/productdata.js' %}"></script>
	<script src="{% static 'fengge/frontend/pointwidget.js' %}"></script>
	<script src="{% static 'fengge/frontend/rectwidget.js' %}"></script>
	<script src="{% static 'fengge/frontend/mappanel.js' %}"></script>
	<script src="{% static 'fengge/frontend/project.js' %}"></script>
	<script src="{% static 'fengge/frontend/app.js' %}"></script>

{% endblock %}
